<template>
	<div class="filter-items-wrap" ref="filterItemsWrap">
		<div class="filter-items" ref="filterItems">
			<span class="item-label title">{{title}}：</span>
			<div class="item-all">
				<span :class="{'checked':current == 'All' ? true : false}" @click="clickHandler('All')">全部</span>
			</div>
			<!--flag  方向系统并不显示返回0   添加flag判断-->
			<div class="item-query">
				<span :class="{'checked':current == item.key ? true : false}" v-for="item in data.filter(d=>d.value)" v-show="item.flag !== 0" :key="item.key" @click="clickHandler(item.key)">{{item.value}}</span>
			</div>
			<div class="item-more" @click="slide" v-if="showMore">更多
				<img src="../../assets/exper/type-down.png" alt="" v-if="!expand"/>
				<img src="../../assets/exper/type-up.png" alt="" v-if="expand"/>
			</div>
		</div>
	</div>
</template>

<script>
    export default {
	    name: 'tagSelect',
		props:['data','title','current'],
		components:{},
	    data(){
	      return {
	      	showMore:false,
	      	expand:false
	      }
	    },
	    watch:{
			
	    },
	    filters:{
	    	
	    },
	    computed:{
	      
	    },
	    created(){
	    },
	    updated(){
	    	this.getShowMore()
	    },
	    mounted(){
	    	this.getShowMore()
	    },
	    beforeDestroy(){
	    	
	    },
	    methods:{
	    	clickHandler(val){
	    		this.$emit('on-change',val);
	    	},
	    	slide(){
            	let slideEl = this.$refs.filterItemsWrap;
            	let el = this.$refs.filterItems;
            	this.expand = !this.expand;
            	if(this.expand){
            		this.slideEnter(el,slideEl);
            	}else{
            		this.slideLeave(slideEl);
            	}
            },
            slideEnter(el,slideEl) {
	            let height = window.getComputedStyle(el, null)['height'];
	            slideEl.style.maxHeight = '28px';
	            //不设定延迟height不会有动画
	            setTimeout(() => {
	              slideEl.style.maxHeight = height;
	              this.$emit('height-change');
	            }, 20);
	        },
	        slideLeave(el) {
	            el.style.maxHeight = '28px';
	            this.$emit('height-change');
	        },
	        getShowMore(){
        		let slideEl = this.$refs.filterItemsWrap;
            	let el = this.$refs.filterItems;
            	if(slideEl && el){
            		this.showMore =  el.clientHeight > 28;
            	}else{
            		return false
            	}
	        },
	        updateHeight(){
	        	if(this.expand){
	        		let slideEl = this.$refs.filterItemsWrap;
	            	let el = this.$refs.filterItems;
	            	setTimeout(() => {
	            	  let height = window.getComputedStyle(el, null)['height'];
		              slideEl.style.maxHeight = height;
		              this.$emit('height-change');
		            }, 20);
	        	}
	        }
	    },
	    destroyed() {
	      
	    }
    }
</script>

<style scoped>
	/*查询样式 ---开始*/
    .filter-items-wrap{
    	font-size:14px;
    	color:var(--default-color);
    	overflow: hidden;
    	max-height:2em;
    	margin-top: 1em;
    	transition: max-height .5s;
    }
    .filter-items-wrap span{
    	display:inline-block;
    	height: 22px;
	    line-height: 22px;
	    margin: 2px 4px 2px 0;
	    padding: 0 8px;
	    border-radius: 3px;
	    cursor:pointer;
    }
    .filter-items-wrap span:not(.checked):hover{
    	color:var(--url-color);
    }
    .filter-items-wrap span.checked{
    	background: var(--url-color);
    	color:#fff;
    }
    .filter-items {
		display: flex;
		/*margin-top: 1em;*/
		/*overflow: hidden;
		height:2em;*/
	}
    .filter-items .item-label,.filter-items .item-all{
    	flex: 0 0 60px;
    }
		.filter-items-wrap .filter-items .item-label:hover {
    color: var(--default-color);
	}
		.filter-items .item-label.title{
			flex: 0 0 92px;
			text-align-last:justify;
			cursor:default
			
		}
    .filter-items .item-query{
    	flex:1 1 auto;
    }
    .filter-items .item-more {
		flex: 0 0 80px;
		cursor:pointer;
		color:var(--url-color);
	}
	.filter-items .item-more img{
		vertical-align: text-top;
    	margin-left: 5px;
	}
    /*查询样式 --- 结束*/
</style>
